<template>
  <div class="wrapper">
    <en-table-layout
      toolbar
      pagination
      ref="tableLayout"
      :height="tableHeight"
      :loading="loading"
      :tableData="dataList"
      :selectionChange="selectionChange">
      <div slot="toolbar" class="inner-toolbar">
        <div>
          <el-button type="primary" @click="openAbnormalExport()">批量导出</el-button>
          <el-button type="primary" @click="openAbnormalReview()">批量审核</el-button>
          <el-button type="primary" @click="openAbnormalRevoke()">批量撤销</el-button>
        </div>
        <div class="toolbar-search">
          <en-table-search
          @search="searchEvent"
          @advancedSearch="advancedSearchEvent"
          advanced
          advancedWidth="500"
          placeholder="请输入理赔订单编号">
            <template slot="advanced-content">
              <el-form :model="advancedForm" ref="advancedForm" label-width="100px">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item prop="claim_sn" label="理赔单号:">
                      <el-input v-model="advancedForm.claim_sn" placeholder="请输入理赔单号" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="exception_sn" label="异常单号:">
                      <el-input v-model="advancedForm.exception_sn" placeholder="请输入异常单编号" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item prop="order_sn" label="订单编号:">
                      <el-input v-model="advancedForm.order_sn" placeholder="请输入订单编号" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="member_nickname" label="买家昵称:">
                      <el-input v-model="advancedForm.member_nickname" placeholder="请输入买家昵称" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item prop="claim_status" label="理赔状态">
                      <el-select v-model="advancedForm.claim_status" placeholder="请选择理赔状态" clearable>
                        <el-option
                        v-for="(item,index) in claimStatus"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="site_name" label="站点名" clearable>
                      <el-input v-model="advancedForm.site_name" placeholder="请输入站点名"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item prop="claim_type" label="理赔类型">
                      <el-select v-model="advancedForm.claim_type" placeholder="请选择理赔类型" clearable>
                        <el-option
                        v-for="(item,index) in claimTypes"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="member_realname_lv1" label="团长姓名" clearable>
                      <el-input v-model="advancedForm.member_realname_lv1" placeholder="请输入团长姓名"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10"  class="search-picker">
                  <el-col :span="6">
                    <el-select v-model="advancedForm.time_type" placeholder="请选择类型" clearable>
                      <el-option
                      v-for="(item,index) in timeTypes"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="18">
                    <el-date-picker
                      clearable
                      v-model="advancedForm.times_range"
                      type="daterange"
                      align="center"
                      :editable="false"
                      unlink-panels
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-col>
              </el-row>
              </el-form>
            </template>
          </en-table-search>
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column width="60" type="selection" />
        <el-table-column min-width="120" prop="claim_sn" label="理赔单号"></el-table-column>
        <el-table-column min-width="120" prop="exception_sn" label="异常单编号"></el-table-column>
        <el-table-column min-width="120" prop="order_sn" label="订单编号"></el-table-column>
        <el-table-column min-width="120" prop="claim_status_text" label="理赔状态"></el-table-column>
        <el-table-column min-width="120" prop="claim_type_text" label="理赔类型"></el-table-column>
        <el-table-column min-width="200" prop="sku_list" label="理赔商品">
          <template slot-scope="scope">
            <div v-if="scope.row.claim_type === 'COMPENSATION_GOODS' || scope.row.claim_type === 'FREE_GIFT'">
              <div v-for="(item,index) in scope.row.sku_list" :key="index">
                <span>商品名称: {{item.goods_name}}</span><span>,数量: {{item.compensation_num}}</span>
                <div>规格:<span v-for="(self, sign) in item.spec_list" :key="sign"> {{self.spec_name}} : {{self.spec_value}} </span></div>
              </div>
            </div>
            <div v-else-if="scope.row.claim_type === 'AFTERSALE_COUPON'">
              {{scope.row.coupon_do.title}}
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="claim_price" label="理赔金额"></el-table-column>
        <el-table-column min-width="120" prop="claim_cost" label="理赔成本"></el-table-column>
        <el-table-column min-width="120" prop="claim_describe" label="理赔说明"></el-table-column>
        <el-table-column min-width="120" prop="shipping_type_text" label="配送方式"></el-table-column>
        <el-table-column min-width="120" prop="member_nickname" label="买家昵称"></el-table-column>
        <el-table-column min-width="150" prop="apply_time" label="申请时间">
          <template slot-scope="{row}">
            <span>{{row.apply_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="150" prop="audit_time" label="审核时间">
          <template slot-scope="{row}">
            <span>{{row.audit_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="audit_describe" label="审核备注"></el-table-column>
        <el-table-column min-width="120" prop="apply_member_name" label="申请人姓名"></el-table-column>
        <el-table-column min-width="120" prop="audit_member_name" label="审核人姓名"></el-table-column>
        <el-table-column min-width="120" prop="ship_name" label="收货人"></el-table-column>
        <el-table-column min-width="120" prop="ship_mobile" label="收货电话"></el-table-column>
        <el-table-column min-width="120" prop="ship_addr" label="收货地址"></el-table-column>
        <el-table-column min-width="120" prop="member_realname_lv1" label="团长姓名"></el-table-column>
        <el-table-column min-width="120" prop="member_mobile_lv1" label="团长电话"></el-table-column>
        <el-table-column min-width="120" prop="site_name" label="自提站点"></el-table-column>
        <el-table-column min-width="120" prop="site_leader_name" label="站长姓名"></el-table-column>
        <el-table-column min-width="120" prop="site_leader_mobile" label="站长电话"></el-table-column>
      </template>
      <el-pagination
        slot="pagination"
        v-if="dataList"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="params.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total">
      </el-pagination>
    </en-table-layout>
    <!-- 审核弹框 -->
    <el-dialog title="审核" width="35%" :visible.sync="abnormalReviewDialog">
      <el-form :model="reviewForm" ref="reviewForm" :rules="reviewRulesForm" label-width="100px">
        <el-row>
          <el-col>
            <el-form-item prop="claims_status" label="审核状态">
              <el-radio-group v-model="reviewForm.claims_status">
                <el-radio label="AUDIT_SUCCESS">审核通过</el-radio>
                <el-radio label="AUDIT_FAIL">审核拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="audit_describe" label="审核备注">
              <el-input type="textarea" v-model="reviewForm.audit_describe" placeholder="请输入审核备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleReviewCancel('reviewForm')">取 消</el-button>
        <el-button @click="handleReviewSubmit('reviewForm')" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API_Messages from '@/api/message'
  export default {
    name: '',
    data () {
      return {
        // 多选
        multipleChoice: [],
        // 表格数据
        dataList: [],
        // 分页
        params: {
          page_no: 1,
          page_size: 10
        },
        // 总条数
        data_total: 0,
        // 加载动画
        loading: false,
        // 高级搜索
        advancedForm: {
          times_range: [],
          start_time: undefined,
          end_time: undefined,
          claim_sn: undefined,
          exception_sn: undefined,
          order_sn: undefined,
          member_nickname: undefined,
          claim_status: undefined,
          claim_type: undefined,
          member_realname_lv1: undefined,
          site_name: undefined,
          time_type: undefined
        },
        // 审核表单
        reviewForm: {
          claims_status: undefined,
          audit_describe: ''
        },
        // 审核弹框
        abnormalReviewDialog: false,
        //理赔类型
        claimTypes: [
          {
            label: '补发商品',
            value: 'COMPENSATION_GOODS'
          },
          {
            label: '赠送礼品',
            value: 'FREE_GIFT'
          },
          {
            label: '赔付现金',
            value: 'PAYMENT_CASH'
          },
          {
            label: '多退少补',
            value: 'REFUND_CASH'
          },
          {
            label: '售后劵',
            value: 'AFTERSALE_COUPON'
          },
          {
            label: '其它',
            value: 'OTHER'
          }
        ],
        // 理赔状态
        claimStatus: [
          {
            label: '已提交',
            value: 'SUBMIT'
          },
          {
            label: '已撤销',
            value: 'CANCELLED'
          },
          {
            label: '审核通过',
            value: 'AUDIT_SUCCESS'
          },
          {
            label: '审核失败',
            value: 'AUDIT_FAIL'
          },
          {
            label: '理赔成功',
            value: 'CLAIM_SUCCESS'
          },
          {
            label: '理赔失败',
            value: 'CLAIM_FAIL'
          }
        ],
        timeTypes: [
          {
            label: '理赔时间',
            value: 'claim_time'
          },
          {
            label: '申请时间',
            value: 'apply_time'
          },
          {
            label: '审核时间',
            value: 'audit_time'
          }
        ],
        // 审核表单验证
        reviewRulesForm: {
          claims_status: [
            {
              required: true,
              message: '审核状态没有选',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      tableHeight (){
        return document.documentElement.clientHeight - 246 + 'px';
      }
    },
    created () {

    },
    mounted() {
      this.getDataList();
    },
    methods: {
      // 获取列表数据
      getDataList() {
        this.loading = true;
        API_Messages.getClaimsList(this.params)
          .then(response => {
            this.dataList = response.data;
            this.data_total = response.data_total;
            this.loading = false;
          })
          .catch((error) => {
            this.$message({
              type: 'error',
              message: error
            })
            this.loading = false;
          })
      },
      // 分页大小发生改变
      handlePageSizeChange(size) {
        this.params.page_size = size;
        this.getDataList();
      },
      // 分页页数发生改变
      handlePageCurrentChange(page) {
        this.params.page_no = page;
        this.getDataList();
      },
      // 多选
      selectionChange(value) {
        this.multipleChoice = value;
      },
      // 高级搜索
      searchEvent(data) {
        this.params = {
          ...this.params,
          order_sn: data
        }
        this.getDataList();
      },
      // 高级搜索
      advancedSearchEvent() {
        if (this.advancedForm.times_range.length > 0) {
          if (this.advancedForm.time_type === undefined) {
            this.$message({
              type: 'error',
              message: '查询类型必选项!'
            })
            return
          }
          this.advancedForm.start_time = this.advancedForm.times_range[0].getTime() / 1000
          this.advancedForm.end_time = this.advancedForm.times_range[1].getTime() / 1000
        }
        this.params = {
          ...this.params,
          ...this.advancedForm
        }
        this.params.page_no = 1;
        this.getDataList();
      },
      // 批量导出
      openAbnormalExport() {
        this.params = {
          ...this.params,
          ...this.advancedForm
        }
        API_Messages.getClaimsExport(this.params).then(response => {
          // 处理返回的文件流
          let blob = new Blob([response], {
            type: 'application/vnd.ms-excel;charset=utf-8'
          });
          let date = new Date().getFullYear() + '' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
          const fileName = date + name + '理赔单.xlsx';
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        }).catch((error) => {
          this.$message({
            type: 'error',
            message: error
          })
        })
      },
      // 批量审核
      openAbnormalReview() {
        if (this.multipleChoice.length > 0) {
          this.abnormalReviewDialog = true;
        } else {
          this.$message({
            type: 'error',
            message: '您还没有选择数据呢!!!'
          })
          return
        }
      },
      // 取消按钮
      handleReviewCancel(reviewForm) {
        this.abnormalReviewDialog = false;
        this.$refs[reviewForm].resetFields();
      },
      // 批量审核
      handleReviewSubmit(reviewForm) {
        this.$refs['reviewForm'].validate(valide => {
          if (valide) {
            let claims_ids = [];
            this.multipleChoice.forEach(item => {
              claims_ids.push(item.claim_id)
            })
            API_Messages.batchClaimsAudit(claims_ids, this.reviewForm).then(response => {
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.abnormalReviewDialog = false;
              this.getDataList();
            }).catch((error) => {
              this.$message({
                type: 'error',
                message: error
              });
            })
          }
        })
      },
      // 批量撤销
      openAbnormalRevoke() {
        if (this.multipleChoice.length > 0) {
          for (let item of this.multipleChoice) {
            let params = {
              'claims_status': 'CANCELLED',
              'audit_describe': ''
            }
            let claims_ids = [];
            claims_ids.push(item.claim_id)
            this.$confirm('处理完成后不可修改, 确定完成了吗')
              .then(_ => {
                API_Messages.batchClaimsAudit(claims_ids, params)
                  .then(response => {
                    this.$message({
                      type: 'success',
                      message: '操作成功'
                    });
                    this.getDataList();
                  })
                  .catch((error) => {
                    this.$message({
                      type: 'error',
                      message: error
                    })
                  })
              })
              .catch(_ => {
                this.$message({
                  type: 'error',
                  message: '操作取消'
                });
              });
          }
        } else {
          this.$message({
            type: 'warning',
            message: '撤销至少选择一条!!!'
          });
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .wrapper {

    /deep/ div.toolbar {
      height: 70px;
      padding: 20px 0;
    }

    /deep/ .el-table {
      padding: 10px;
      width: 100%;
      overflow-x: scroll;
      & td:not(.is-left) {
        text-align: center;
      }
    }

    .inner-toolbar {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    /deep/ .pop-sku {
      .toolbar {
        display: none;
      }
      .el-dialog__body {
        .el-table {
          border: 1px solid #e5e5e5;
        }
      }
      .el-table__body-wrapper {
        max-height: 400px;
        overflow-y: scroll;
      }
    }

    .toolbar-search {
      margin-right: 10px;
      width: 20%;
    }
  }
</style>
